<template>

  <div>

    <div class="scroll-tab">
      <tab bar-active-color="#4791d2"  active-color="#4791d2">
        <tab-item selected @on-item-click="onItemClick">全部</tab-item>
        <tab-item @on-item-click="onItemClick">待发布</tab-item>
        <tab-item @on-item-click="onItemClick">待抢单</tab-item>
        <tab-item @on-item-click="onItemClick">已抢单</tab-item>
        <tab-item @on-item-click="onItemClick">待确认</tab-item>
        <tab-item @on-item-click="onItemClick">已完成</tab-item>
        <tab-item @on-item-click="onItemClick">已取消</tab-item>
      </tab>
    </div>


    <view-box ref="viewBox">
      <group class="content">
        <cell-box class="lng-flex lng-jc-sb">
          <div class="img-box">
            <span class="tag">平急</span>
            <img src="../../assets/img/protal.png" alt="">
          </div>
          <div class="lng-12-text">
            <div class="content-detail">
              异常情况说明：滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研。
            </div>
            <p class="gray-text">维修截止时间：2017-11-11</p>
            <p class="gray-text">站点名称：嘉兴嘉通加气站</p>
            <div class="lng-flex lng-jc-sb lng-14-text">
              <div class="blue-text">1680￥</div>
              <div class="blue-text">待接单</div>
            </div>
          </div>
        </cell-box>
        <cell-box class="lng-flex lng-jc-sb">
          <div class="img-box">
            <span class="tag">平急</span>
            <img src="../../assets/img/protal.png" alt="">
          </div>
          <div class="lng-12-text">
            <div class="content-detail">
              异常情况说明：滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研。
            </div>
            <p class="gray-text">维修截止时间：2017-11-11</p>
            <p class="gray-text">站点名称：嘉兴嘉通加气站</p>
            <div class="lng-flex lng-jc-sb lng-14-text">
              <div class="blue-text">1680￥</div>
              <div class="blue-text">已接单</div>
            </div>
          </div>
        </cell-box>
        <cell-box class="lng-flex lng-jc-sb">
          <div class="img-box">
            <span class="tag yellow-tag">加急</span>
            <img src="../../assets/img/protal.png" alt="">
          </div>
          <div class="lng-12-text">
            <div class="content-detail">
              异常情况说明：滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研。
            </div>
            <p class="gray-text">维修截止时间：2017-11-11</p>
            <p class="gray-text">站点名称：嘉兴嘉通加气站</p>
            <div class="lng-flex lng-jc-sb lng-14-text">
              <div class="blue-text">1680￥</div>
              <div class="blue-button">确认</div>
            </div>
          </div>
        </cell-box>
        <cell-box class="lng-flex lng-jc-sb">
          <div class="img-box">
            <span class="tag orange-tag">特急</span>
            <img src="../../assets/img/protal.png" alt="">
          </div>
          <div class="lng-12-text">
            <div class="content-detail">
              异常情况说明：滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研。
            </div>
            <p class="gray-text">维修截止时间：2017-11-11</p>
            <p class="gray-text">站点名称：嘉兴嘉通加气站</p>
            <div class="lng-flex lng-jc-sb lng-14-text">
              <div class="blue-text">1680￥</div>
              <div class="gray-text">已完成</div>
            </div>
          </div>
        </cell-box>
        <cell-box class="lng-flex lng-jc-sb">
          <div class="img-box">
            <span class="tag">平急</span>
            <img src="../../assets/img/protal.png" alt="">
          </div>
          <div class="lng-12-text">
            <div class="content-detail">
              异常情况说明：滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研。
            </div>
            <p class="gray-text">维修截止时间：2017-11-11</p>
            <p class="gray-text">站点名称：嘉兴嘉通加气站</p>
            <div class="lng-flex lng-jc-sb lng-14-text">
              <div class="blue-text">1680￥</div>
              <div class="gray-text">已取消</div>
            </div>
          </div>
        </cell-box>
      </group>

    </view-box>

    <div class="blue-circle-button" @click="publish()">发布</div>

    <tab-bar selected="3"></tab-bar>

  </div>


</template>

<script>
  import {
    Tab, TabItem,
    ViewBox,CellBox,
    Flexbox,
    Group,
    Picker,
    XInput,
    FlexboxItem,
    PopupPicker,
    Popup,
    Cell,
    TransferDom,
    XDialog
  } from 'vux'
  import tabBar from '@/components/equipment/public/tab-bar'


  export default {
    directives: {
      TransferDom
    },
    components: {
      tabBar,

      Tab, TabItem,
      XDialog,CellBox,
      ViewBox,
      Cell,
      Group,
      XInput,
      Popup,
      PopupPicker,
      Flexbox,
      Picker,
      FlexboxItem,
    },
    mounted() {

    },
    data () {
      return {
        showDetailDialog: false,
        name: "",
        showSearchBox: true,
        area: [],
        station: [],
        stationList: [[
          {
            name: '嘉通站',
            value: 'jiatong',
          },
          {
            name: '嘉的萨满的萨克的萨克的撒接口的站',
            value: 'jiadtong',
          },
        ]],
        showPopup: false,
        years: []
      }
    },
    watch: {
      years(val){
        console.log(val)
      }
    },
    methods: {
      onItemClick(index){
          console.log(index);
      },
      getDetail(){
        this.showDetailDialog = true;
      },
      change(){
        this.$router.push({
          name: 'equipmentChange',
          query: {id: 11}
        })
      },
      publish(){
        this.$router.push({
          name: 'publishMalfunction'
        })
      },
      toggleSearchBox(){
        this.showSearchBox = !this.showSearchBox;
      },
      search(){
        this.showSearchBox = false;
      },
      goPath(name){
        this.$router.push({
          name: name
        });
      },
      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    }
  }
</script>

<style scoped>
  .content {
    margin: 0 0 1.8rem;
  }

  .content .lng-flex {
    padding: 10px;
  }

  .content .lng-flex .title {
    padding: 5px 0;
    font-size: 14px;
    color: #000;
  }

  .content .lng-flex .des {
    padding: 5px 0;
    font-size: 12px;
  }

  .search-btn {
    color: #4791d2;
    font-weight: bold;
    padding: 0 4px;
    text-align: center;
    width: 10%;
  }

  .search-btn .icon {
    font-size: 20px;
  }

  .top-bar {
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
  }

  .top-bar:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: -2px;
    right: 0;
    height: 1px;
    border-top: 1px solid #C0BFC4;
    color: #C0BFC4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .top-bar .vux-cell-box {
    width: 40%;
    margin: 0 5px;
  }

  .top-bar .vux-x-input {
    width: 40%;
    margin: 0 5px;
  }

  .top-bar.lng-flex > div {
    flex: inherit;
    white-space: nowrap;
    overflow: hidden;
  }
  .blue-button {
    float: right;
    padding: 4px 18px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
  }

  .vux-x-icon {
    width: .4rem;
    height: .4rem;
    vertical-align: middle;
    color: #4791d2;
  }

  .weui-tab{
    height: calc(100% - 40px);
  }

  .scroll-tab{
    width: 100%;
    overflow: auto;
  }
  .vux-tab{
    width: 150%;
    overflow: auto;
  }

  .img-box{
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    margin-right: 10px;
  }

  .img-box{
    position: relative;
  }

  .img-box .tag{
    position: absolute;
    top: 0;
    left: 0;
  }

  .img-box img{
    height: 100%;
  }
  .content .lng-flex .lng-12-text{
    flex: 1;
  }
  .content .lng-flex .lng-12-text p{
    margin: 4px 0;
  }

  .blue-circle-button{
    position: absolute;
    right: 20px;
    bottom: 60px;
  }
</style>
<style>
  .top-bar .weui-cell {
    padding: 5px 2px;
    border: 1px solid #C7C7C7;
    border-radius: 4px;
  }

  .equipment-content .weui-cell__ft {
    width: 100%;
    text-align: left;
  }

</style>

